<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 加载vue的工具库 ==> 在全局环境对象中增加 Vue 构建对象 -->
    <script src="../assets/vue3/vue.global.js"></script>
    <!-- <script src="../assets/vue3/vue.global.prod.js"></script> -->
    <!-- <script src="../assets/vue3/vue.esm-browser.prod.js"></script> -->
    <script>
        // Vue 对象是vue框架功能提供的入口构成对象,通过提供的创建方法 createApp 构建vue应用
        console.log( window );
        console.log( window.Vue );
        // 创建应用对象 = 启动vue的语法，实现响应式规则(MVVM)中视图和数据的关联操作;应用对象提供 mount(el) 函数完成和页面关联
        //              --> 提供一个可以转换 vue 语法的执行转换过程
        //              --> el 全称  element select  CSS的元素选择器
        let app = Vue.createApp({
            // ES6 对象缩写方案
            data(){
                return {
                    msg:"msg初始值"
                }
            }
        });
        console.log(app);
        // 应用挂载 - 一个应用只能对应一个关联标签 - 应该在页面加载完成后执行
        window.onload = function(){
            app.mount("#app")
            // app.mount(".root")
        }
    </script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <hr>
    <div class="root">
        <p>{{ msg }}</p>
    </div>
    <hr>
    <div class="root">
        <p>{{ msg }}</p>
    </div>
    <hr>
    <p>{{ msg }}</p>
</body>
</html>